<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap-table系列</title>

    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="../js/bootstrap.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.css" />
    <link rel="stylesheet" href="../css/bootstrap-theme.css"/>
</head>
<body>
<!-- 响应式表格 -->
<div class="responsive">
    <!-- table -->
    <table class="table table-striped table-bordered table-hover text-center">
        <!-- 表格描述 -->
        <caption>表格描述-学习bootstrap简单表格应用</caption>
        <thead class="text-center">
            <tr>
                <th>名称</th>
                <th>登陆名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>

        <!-- 颜色 -->
        <tbody >
            <tr class="active success">
                <td>开机</td>
                <td>samuel</td>
                <td>男</td>
                <td>25</td>
            </tr>
            <tr class="active warning">
                <td>关机</td>
                <td>pan</td>
                <td>女</td>
                <td>18</td>
            </tr>

            <tr class="danger">
                <td>关机</td>
                <td>pan</td>
                <td>女</td>
                <td>18</td>
            </tr>
        </tbody>
    </table>
</div>
</body>
</html>